window.yx = {
    g: function (name) {
        return document.querySelector(name);
    },
    ga: function (name) {
        return document.querySelectorAll(name);
    },

    //事件监听
    addEvent: function (obj, ev, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(ev, fn);
        } else {
            obj.attachEvent('on' + ev, fn);
        }
    },
    removeEvent: function (obj, ev, fn) {
        if (obj.removeEventListener) {
            obj.removeEventListener(ev, fn);
        } else {
            obj.detachEvent('on' + ev, fn);
        }
    },

    // 获取元素离html距离
    getTopValue: function (obj) {
        var top = 0;
        while (obj.offsetParent) {
            top += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return top;
    },

    animate: function (obj, target, callback) {
        // console.log(callback);  callback = function() {}  调用的时候 callback()
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                // if (callback) {
                //     // 调用函数
                //     callback();
                // }
                callback && callback();
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    },



    public: {
        navFn: function () {
            var nav = yx.g('.nav');
            var lis = yx.ga('.navBar li');
            var subNav = yx.g('.subNav');
            var uls = yx.ga('.subNav ul');
            var newLis = [];  //存储实际有用的li

            for (var i = 1; i < lis.length - 3; i++) {
                newLis.push(lis[i]);

            }

            for (var i = 0; i < newLis.length; i++) {
                // console.log('yes');
                newLis[i].index = uls[i].index = i;
                if (newLis[i].onmouseenter) {
                    console.log('on');
                };
                newLis[i].onmouseenter = uls[i].onmouseenter = function () {
                    // console.log(1);

                    newLis[this.index].className = 'active';
                    subNav.style.opacity = 1;
                    uls[this.index].style.display = 'block';
                };
                newLis[i].onmouseleave = uls[i].onmouseleave = function () {
                    newLis[this.index].className = '';
                    subNav.style.opacity = 0;
                    uls[this.index].style.display = 'none';
                };
            }
            //滚动条添加吸顶
            yx.addEvent(window, 'scroll', setNavPos);
            setNavPos();
            function setNavPos() {
                // if (window.pageYOffset > nav.offsetTop) {
                //     nav.id = 'navFix'
                // } else {
                //     nav.id = '';
                // }
                nav.id = window.pageYOffset > nav.offsetTop ? 'navFix' : '';
            }
        },

        // 图片懒加载
        lazyImgFn: function () {
            // 所有要懒加载的图片
            var originals = document.querySelectorAll('.original');
            // 滚动时触发事件
            window.onload = window.onscroll = function () {
                // 可视区高度
                var ksheight = document.documentElement.clientHeight;

                // 获得卷起高度
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                // 遍历所有图片，看那些需要显示，那些不需要
                for (var i = 0; i < originals.length; i++) {
                    // 获取该图片距离网页顶部距离
                    var top = yx.getTopValue(originals[i])
                    // 根据top和卷起高度和可视区高度判断图片是否需要显示
                    if (top <= ksheight + scrollTop) {
                        originals[i].src = originals[i].getAttribute('data-original');
                        originals[i].removeAttribute('class');
                    }
                    // if (originals[originals.length - 1].getAttribute('src') != './images/empty.gif') {
                    //     yx.removeEvent(window, 'scroll', delayImg);
                    // }
                }
            }
        },

        // 回到顶部
        backUpFn: function () {
            var back = document.querySelector('.back');
            var timer;//计时器
            back.onclick = function () {
                var top = window.pageYOffset;
                timer = setInterval(function () {
                    top -= 150;
                    if (top <= 0) {
                        top = 0;
                        clearInterval(timer);
                    }
                    window.scrollTo(0, top);
                }, 16);
            }
        },

        // 动态生成小圆圈
        circleFn: function () {
            var arrow_l = document.querySelector('.prev');
            var arrow_r = document.querySelector('.next');
            var bannerpics = document.querySelector('.bannerPic');
            var carouselImgCon = document.querySelector('.carouselImgCon li');
            var focusWidth = carouselImgCon.offsetWidth;
            // 获取bannerpic下ul
            var ul = bannerpics.querySelector('ul');
            // console.log(ul.children.length);

            var ol = bannerpics.querySelector('.circle');
            for (var i = 0; i < ul.children.length; i++) {
                // 创建li
                var li = document.createElement('li');
                // 记录当前小圆圈的索引号 通过自定义属性来做 
                li.setAttribute('index', i);
                // 把li插入ol中
                ol.appendChild(li);
                // 排他思想
                li.addEventListener('click', function () {
                    // 将所有li清除，清除current类名
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    // 留下当前li，设置current类名
                    this.className = 'current';
                    // 5. 点击小圆圈，移动图片 当然移动的是 ul 
                    // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
                    // 当我们点击了某个小li 就拿到当前小li 的索引号
                    var index = this.getAttribute('index');
                    // 当我们点击了某个小li 就要把这个li 的索引号给 num  
                    num = index;
                    // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
                    circle = index;
                    // num = circle = index;
                    // console.log(focusWidth);
                    // console.log(index);

                    yx.animate(ul, -index * focusWidth);
                })
            }
            // 把ol里面的第一个小li设置类名为 current
            ol.children[0].className = 'current';
            // 6. 克隆第一张图片(li)放到ul 最后面
            var first = ul.children[0].cloneNode(true);
            ul.appendChild(first);
            // 7. 点击右侧按钮， 图片滚动一张
            var num = 0;
            // circle 控制小圆圈的播放
            var circle = 0;
            // flag 节流阀
            var flag = true;
            arrow_r.addEventListener('click', function () {
                if (flag) {
                    flag = false; // 关闭节流阀
                    // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
                    if (num == ul.children.length - 1) {
                        ul.style.left = 0;
                        num = 0;
                    }
                    num++;
                    yx.animate(ul, -num * focusWidth, function () {
                        flag = true; // 打开节流阀
                    });
                    // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
                    circle++;
                    // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
                    if (circle == ol.children.length) {
                        circle = 0;
                    }
                    // 调用函数
                    circleChange();
                }

            });
            // 9. 左侧按钮做法
            arrow_l.addEventListener('click', function () {
                if (flag) {
                    flag = false;
                    if (num == 0) {
                        num = ul.children.length - 1;
                        ul.style.left = -num * focusWidth + 'px';
                    }
                    num--;
                    yx.animate(ul, -num * focusWidth, function () {
                        flag = true;
                    });
                    // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
                    circle--;
                    // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
                    // if (circle < 0) {
                    //     circle = ol.children.length - 1;
                    // }
                    circle = circle < 0 ? ol.children.length - 1 : circle;
                    // 调用函数
                    circleChange();
                }
            });

            function circleChange() {
                // 先清除其余小圆圈的current类名
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                // 留下当前的小圆圈的current类名
                ol.children[circle].className = 'current';
            }
            // 10. 自动播放轮播图
            var timer = setInterval(function () {
                //手动调用点击事件
                arrow_r.click();
            }, 2000);
        },

        // 倒计时
        countDownFn: function () {
            var hour = document.querySelector('.hour');
            var minute = document.querySelector('.minute');
            var second = document.querySelector('.second');
            var inputTime = +new Date('2022-7-16 15:00:00');//商品结束时间
            countDown();
            setInterval(countDown, 1000);
            function countDown() {
                var nowTime = +new Date();//当前时间

                var times = (inputTime - nowTime) / 1000;
                var h = parseInt(times / 60 / 60 % 24);//用parseInt分割求得小时数
                h = h < 10 ? '0' + h : h;
                hour.innerHTML = h;

                var m = parseInt(times / 60 % 60);
                m = m < 10 ? '0' + m : m;
                minute.innerHTML = m;

                var s = parseInt(times % 60);
                s = s < 10 ? '0' + s : s;
                second.innerHTML = s;

            }


        },
    }
}